<template>
	<view class="container">
		<view class="header">
			<uni-icons 
				type="arrowleft" 
				size="24" 
				color="#333" 
				@click="goBack"
			></uni-icons>
			<text class="title">编辑零食</text>
			<view style="width: 24px;"></view>
		</view>
		
		<scroll-view class="form-container" scroll-y>
			<view class="form-card">
				<!-- 图片上传 -->
				<view class="upload-section">
					<text class="section-title">零食图片</text>
					<view class="upload-box" @click="chooseImage">
						<image 
							v-if="formData.image_url" 
							:src="formData.image_url" 
							class="preview-image"
							mode="aspectFill"
						></image>
						<view v-else class="upload-placeholder">
							<uni-icons type="camera" size="36" color="#999"></uni-icons>
							<text class="upload-text">点击上传图片</text>
						</view>
					</view>
				</view>
				
				<!-- 基本信息 -->
				<view class="form-section">
					<text class="section-title">基本信息</text>
					<uni-forms ref="form" :model="formData" :rules="rules">
						<uni-forms-item label="零食名称" name="name" required>
							<uni-easyinput 
								v-model="formData.name" 
								placeholder="请输入零食名称"
							/>
						</uni-forms-item>
						
						<uni-forms-item label="分类" name="category_id" required>
							<uni-data-select
								v-model="formData.category_id"
								:localdata="categories"
								:clear="false"
								placeholder="请选择分类"
							></uni-data-select>
						</uni-forms-item>
						
						<uni-forms-item label="售价" name="price" required>
							<uni-easyinput 
								v-model="formData.price" 
								placeholder="请输入售价"
								type="digit"
							>
								<template v-slot:right>
									<text class="input-suffix">元</text>
								</template>
							</uni-easyinput>
						</uni-forms-item>
						
						<uni-forms-item label="成本价" name="cost_price">
							<uni-easyinput 
								v-model="formData.cost_price" 
								placeholder="请输入成本价"
								type="digit"
							>
								<template v-slot:right>
									<text class="input-suffix">元</text>
								</template>
							</uni-easyinput>
						</uni-forms-item>
						
						<uni-forms-item label="状态" name="status">
							<uni-data-checkbox 
								v-model="formData.status" 
								:localdata="statusOptions"
							/>
						</uni-forms-item>
					</uni-forms>
				</view>
				
				<!-- 描述信息 -->
				<view class="form-section">
					<text class="section-title">描述信息</text>
					<uni-forms-item label="描述" name="description">
						<uni-easyinput 
							v-model="formData.description" 
							placeholder="请输入零食描述"
							type="textarea"
							autoHeight
						/>
					</uni-forms-item>
				</view>
			</view>
		</scroll-view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn-container">
			<button 
				class="submit-btn" 
				@click="submitForm"
				:disabled="isSubmitting"
			>
				<text v-if="!isSubmitting">保存修改</text>
				<uni-load-more v-else status="loading" color="#fff"></uni-load-more>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				snackId: null,
				isSubmitting: false,
				formData: {
					name: '',
					category_id: '',
					category_name: '',
					price: '',
					cost_price: '',
					description: '',
					image_url: '',
					status: 1
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入零食名称'
						}]
					},
					category_id: {
						rules: [{
							required: true,
							errorMessage: '请选择分类'
						}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '请输入售价'
						}, {
							format: 'number',
							errorMessage: '请输入正确的价格'
						}]
					},
					cost_price: {
						rules: [{
							format: 'number',
							errorMessage: '请输入正确的价格'
						}]
					}
				},
				categories: [
					{ value: 2, text: "膨化食品" },
					{ value: 3, text: "糖果巧克力" },
					{ value: 4, text: "饮料" },
					{ value: 5, text: "饼干糕点" }
				],
				statusOptions: [
					{ value: 1, text: "在售" },
					{ value: 0, text: "下架" }
				]
			}
		},
		onLoad(options) {
			this.snackId = options.id;
			this.fetchSnackData();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			fetchSnackData() {
				// 模拟API调用获取数据
				setTimeout(() => {
					// 示例数据
					const mockData = {
						id: 1,
						name: '薯片',
						category_id: 2,
						category_name: '膨化食品',
						price: 5.50,
						cost_price: 3.20,
						description: '香脆可口，多种口味可选',
						image_url: '/static/snacks/chips.jpg',
						status: 1,
						created_at: '2023-01-15 10:30:00',
						updated_at: '2023-01-15 10:30:00'
					};
					
					this.formData = {
						...mockData,
						image_url: mockData.image_url || ''
					};
				}, 500);
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 实际开发中这里需要上传到服务器
						this.formData.image_url = res.tempFilePaths[0];
					}
				});
			},
			submitForm() {
				this.$refs.form.validate().then(() => {
					this.isSubmitting = true;
					
					// 设置分类名称
					const selectedCategory = this.categories.find(item => item.value === this.formData.category_id);
					this.formData.category_name = selectedCategory ? selectedCategory.text : '';
					
					// 模拟API调用
					setTimeout(() => {
						console.log('提交数据:', this.formData);
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}, 1000);
				}).catch(err => {
					console.log('表单错误:', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		
		.title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	}
	
	.form-container {
		flex: 1;
		padding: 15px;
	}
	
	.form-card {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	}
	
	.form-section {
		margin-bottom: 25px;
		
		.section-title {
			display: block;
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 15px;
			padding-left: 5px;
			border-left: 4px solid #4a8fe7;
		}
	}
	
	.upload-section {
		margin-bottom: 25px;
		
		.section-title {
			display: block;
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 15px;
			padding-left: 5px;
			border-left: 4px solid #4a8fe7;
		}
		
		.upload-box {
			width: 100%;
			height: 180px;
			border: 1px dashed #ddd;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			background-color: #f9f9f9;
			
			.preview-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			.upload-placeholder {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.upload-text {
					font-size: 14px;
					color: #999;
					margin-top: 10px;
				}
			}
		}
	}
	
	.input-suffix {
		color: #999;
		padding: 0 10px;
	}
	
	.submit-btn-container {
		padding: 15px;
		background-color: #fff;
		border-top: 1px solid #eee;
	}
	
	.submit-btn {
		background: linear-gradient(135deg, #4a8fe7, #6a5acd);
		color: white;
		border: none;
		border-radius: 25px;
		height: 45px;
		line-height: 45px;
		font-size: 16px;
		box-shadow: 0 4px 12px rgba(74, 143, 231, 0.3);
		
		&[disabled] {
			opacity: 0.7;
		}
	}
	
	@media (min-width: 768px) {
		.form-container {
			padding: 30px;
		}
		
		.form-card {
			padding: 30px;
			max-width: 600px;
			margin: 0 auto;
		}
	}
</style>